<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/static/base/common/css/sapar.css"/>
    <link rel="stylesheet" href="/static/base/static/css/index_inner.css"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/modules/layer/default/layer.css" media="all">
    <title>居民与房屋管理-主页</title>
</head>

<body>
<div id="container" >
    <div id="bd" style="margin: 0 auto">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>房屋详细</legend>
        </fieldset>
        <div id="house-basic-info" style="width: calc(100% - 200px);margin: 0 auto;background: #fff;">
            <div id="mainImage" style="width: 500px;height: 500px; float: left;background: #72b877" >
                <img src="/static/images/house/house.jpg" alt="#" height="500px" width="500px"/>
            </div>
            <div id="house-basic-right" >
                <fieldset class="layui-elem-field" style="height: 500px">
                    <legend>户主介绍</legend>
                    <div class="layui-field-box">
                        <div class="layui-fluid" style="background: papayawhip ;margin-bottom: 20px;" >

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo grid-demo-bg1">户主姓名：<span id="name"></span></div>
                                </div>
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">户主性别：<span id="sex"></span></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-fluid" style=" background: papayawhip ;margin-bottom: 20px" >

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo grid-demo-bg1">坐落位置:<span id="position"></span></div>
                                </div>

                                <div class="layui-col-sm6">
                                    <div class="grid-demo">联系电话:<span id="tel"></span></div>
                                </div>

                            </div>
                        </div>



                        <div class="layui-fluid" style="background: papayawhip;margin-bottom: 20px;">

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">详细地址:<span id="addr"></span></div>
                                </div>


                            </div>
                        </div>


                        <div class="layui-fluid" style="background: papayawhip;margin-bottom: 20px;">

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">所在楼层/总层数:<span id="floor"></span></div>
                                </div>
                                <div class="layui-col-sm6">
                                    <div class="grid-demo grid-demo-bg1">房屋状态:<span id="status"></span></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-fluid" style="background: papayawhip;margin-bottom: 20px;">

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">房型:<span id="housetype"></span></div>
                                </div>
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">朝向:<span id="sunrise"></span></div>
                                </div>

                            </div>
                        </div>

                        <div class="layui-fluid layui-card" style="background: papayawhip;margin-bottom: 20px;">

                            <div class="layui-row layui-card-body">
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">建筑面积:<span id="areabuild"></span></div>
                                </div>
                                <div class="layui-col-sm6">
                                    <div class="grid-demo">装修状况:<span id="decorationstatus"></span></div>
                                </div>

                            </div>
                        </div>


                    </div>

                </fieldset>
            </div>
        </div>
        <div name="house-detail-info">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>房屋状况</legend>
            </fieldset>
            <div id="generalSituation" style="width:calc(100% - 200px);margin: 0 auto">



                <fieldset class="layui-elem-field" style="height: 200px">
                    <legend>环境介绍</legend>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body">

                                <div class="layui-fluid layui-card" style="margin-top: 20px;">

                                    <div class="layui-row layui-card-body">
                                        <div class="layui-col-sm9">
                                            <div class="grid-demo">
                                                1、小区环境优美，交通便利，周边大型购物超市，学校风气浓厚。
                                                <br/>
                                                2、占地面积大，社区拥有别具特色的二号小区，多元化生活的双会所配套，智能化配置，涉外品质的安全防范系统。
                                                <br/>
                                                3、办公，商务和娱乐休闲为一体占尽新经济主要区域- 的天时地利综合优势，淋漓开启资讯时代崭新的生活.小区环境优雅，配套成熟，居住舒适。交通还很便利
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </fieldset>

                <fieldset class="layui-elem-field" style="height: 200px">
                    <legend>费用</legend>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-fluid layui-card" style="margin-bottom: 20px;">

                                    <div class="layui-row layui-card-body">
                                        <div class="layui-col-sm6">
                                            <div class="grid-demo">房屋总价:<span id="price"></span></div>
                                        </div>
                                        <div class="layui-col-sm6">
                                            <div class="grid-demo">建筑面积:<span id="area"></span></div>
                                        </div>


                                    </div>
                                    <div class="layui-row layui-card-body">
                                        <div class="layui-col-sm6">
                                            <div class="grid-demo">参考首付:<span id="moonpay"></span></div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </fieldset>

                <fieldset class="layui-elem-field" >
                    <legend>户型</legend>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-fluid layui-card" style="margin-bottom: 20px;">

                                    <div class="layui-row layui-card-body" style="float: left">
                                        <div class="layui-col-sm6" >
                                            <img src="/static/images/house/house3.jpg" alt="#" width="400px" >
                                        </div>
                                    </div>

                                    <div class="layui-row layui-card-body" style="float: right">
                                        <div class="layui-col-sm6">
                                            <img src="/static/images/house/house2.jpg" alt="#" width="400px">
                                        </div>
                                    </div>



                                </div>
                            </div>
                        </div>
                    </div>

                </fieldset>


            </div>
            <div id="generalDesc"></div>
            <div id="generalExpense"></div>
        </div>


    </div>
</div>


</body>
<script type="text/javascript" src="/static/webjars/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
<script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
<script type="text/javascript" src="/static/base/static/js/index_inner.js"></script>
<script type="application/javascript">
    var $ = layui.$;
    $.post("/ajax/city-house/getcityhouseinfobyid",{
        id: GetRequest()
    },function (res) {
        console.log(res.data);
        $("#name").html(res.data.name);
        $("#sex").html(res.data.sex);
        $("#position").html(res.data.province+res.data.city+res.data.county);
        $("#tel").html(res.data.telphone);
        $("#addr").html(res.data.addr);
        $("#floor").html(res.data.floor+"层/"+res.data.floorCount+"层");
        $("#status").html(res.data.status);
        $("#area").html(res.data.areaBuild+"㎡");
        $("#areabuild").html(res.data.areaBuild+"㎡");
        $("#housetype").html(res.data.houseType);
        $("#sunrise").html(res.data.sunrise);
        $("#price").html(res.data.price*res.data.areaBuild*1.00/10000+"万元"+"("+res.data.price+"元/㎡)");
        $("#moonpay").html(res.data.price*res.data.areaBuild*1.00/10000*30/100+"万元");

        $("#decorationstatus").html(res.data.decorationStatus);

        // localStorage.clear();
        // alert(sId);
    });

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) {    //判断是否有参数
            var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
            strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
            return strs[1];          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
        }
    }

</script>



</html>